<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{if .CurrentNotice}}编辑公告{{else}}发布新公告{{end}} - AI Collections</title>
    <link rel="stylesheet" href="/ai-collections/static/css/style.css">
    <link rel="icon" type="image/png" href="/ai-collections/static/images/logo.png">
    <style>
        .notice-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

        .notice-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .btn-back {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
        }

        .btn-back:hover {
            color: var(--primary-color);
        }

        .notice-form {
            background-color: var(--card-background);
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            font-size: 1rem;
            background-color: var(--background-color);
            color: var(--text-color);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

        .form-textarea {
            min-height: 300px;
            resize: vertical;
            line-height: 1.6;
        }

        .form-footer {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.5rem;
            font-weight: 500;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-save {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-save:hover {
            background-color: var(--primary-dark);
        }

        .btn-cancel {
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .btn-cancel:hover {
            background-color: var(--border-color);
        }

        .error-message {
            color: var(--danger-color);
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        .preview-container {
            margin-top: 2rem;
            border-top: 1px solid var(--border-color);
            padding-top: 2rem;
        }

        .preview-label {
            font-weight: 500;
            margin-bottom: 1rem;
        }

        .preview-content {
            background-color: var(--background-color);
            padding: 1.5rem;
            border-radius: 0.5rem;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div id="toastContainer" class="toast-container"></div>

    <header class="header">
        <div class="logo">
            <img src="/ai-collections/static/images/logo.png" alt="Logo" class="logo-img">
            <span>AI Collections</span>
        </div>
        <nav>
            <a href="/ai-collections/">首页</a>
            <a href="/ai-collections/notice" class="active">公告</a>
        </nav>
        <div class="user-menu">
            <span class="avatar">{{if .UserInfo.IsGuest}}游客{{else}}{{.UserInfo.Username}}{{end}}</span>
        </div>
    </header>

    <div class="notice-container">
        <div class="notice-actions">
            <a href="{{if .CurrentNotice}}/ai-collections/notice/{{.CurrentNotice.ID}}{{else}}/ai-collections/notice{{end}}" class="btn-back">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                </svg>
                {{if .CurrentNotice}}返回公告详情{{else}}返回公告列表{{end}}
            </a>
        </div>

        <div class="notice-form">
            <h1>{{if .CurrentNotice}}编辑公告{{else}}发布新公告{{end}}</h1>
            
            <form id="notice-form">
                <input type="hidden" id="notice-id" value="{{if .CurrentNotice}}{{.CurrentNotice.ID}}{{end}}">
                
                <div class="form-group">
                    <label for="title" class="form-label">公告标题</label>
                    <input type="text" id="title" class="form-input" required value="{{if .CurrentNotice}}{{.CurrentNotice.Title}}{{end}}" placeholder="请输入公告标题">
                    <div class="error-message" id="title-error"></div>
                </div>
                
                <div class="form-group">
                    <label for="content" class="form-label">公告内容</label>
                    <textarea id="content" class="form-input form-textarea" required placeholder="请输入公告内容">{{if .CurrentNotice}}{{.CurrentNotice.Content}}{{end}}</textarea>
                    <div class="error-message" id="content-error"></div>
                </div>
                
                <div class="preview-container">
                    <div class="preview-label">内容预览</div>
                    <div id="preview-content" class="preview-content">{{if .CurrentNotice}}{{.CurrentNotice.Content}}{{else}}预览将在这里显示{{end}}</div>
                </div>
                
                <div class="form-footer">
                    <button type="button" class="btn btn-cancel" id="cancel-btn">取消</button>
                    <button type="submit" class="btn btn-save">保存公告</button>
                </div>
            </form>
        </div>
    </div>

    <script>
    function showToast(message, type = 'warning') {
        const container = document.getElementById('toastContainer');
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.textContent = message;
        container.appendChild(toast);

        // 3秒后自动移除
        setTimeout(() => {
            toast.style.animation = 'slideOut 0.3s ease-out forwards';
            setTimeout(() => {
                container.removeChild(toast);
            }, 300);
        }, 3000);
    }

    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('notice-form');
        const titleInput = document.getElementById('title');
        const contentInput = document.getElementById('content');
        const previewContent = document.getElementById('preview-content');
        const cancelBtn = document.getElementById('cancel-btn');
        
        // 实时预览
        contentInput.addEventListener('input', function() {
            previewContent.textContent = this.value || '预览将在这里显示';
        });
        
        // 取消按钮
        cancelBtn.addEventListener('click', function() {
            window.location.href = '{{if .CurrentNotice}}/ai-collections/notice/{{.CurrentNotice.ID}}{{else}}/ai-collections/notice{{end}}';
        });
        
        // 表单提交
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 验证表单
            let valid = true;
            if (!titleInput.value.trim()) {
                document.getElementById('title-error').textContent = '请输入公告标题';
                valid = false;
            } else {
                document.getElementById('title-error').textContent = '';
            }
            
            if (!contentInput.value.trim()) {
                document.getElementById('content-error').textContent = '请输入公告内容';
                valid = false;
            } else {
                document.getElementById('content-error').textContent = '';
            }
            
            if (!valid) return;
            
            // 提交表单
            try {
                const response = await fetch('/ai-collections/notice/save', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        id: document.getElementById('notice-id').value,
                        title: titleInput.value.trim(),
                        content: contentInput.value.trim()
                    }),
                });
                
                const data = await response.json();
                if (data.success) {
                    showToast('公告保存成功', 'success');
                    setTimeout(() => {
                        window.location.href = `/ai-collections/notice/${data.id}`;
                    }, 1000);
                } else {
                    showToast('保存失败: ' + (data.error || '未知错误'), 'error');
                }
            } catch (error) {
                showToast('保存失败: ' + error.message, 'error');
            }
        });
        
        {{if .Error}}
        showToast("{{.Error}}", 'error');
        {{end}}
    });
    </script>
</body>
</html> 